<template>
	<view class="container">
		<view class="view">
			<view class="tui-category" hover-class="opcity" :hover-stay-time="150">
				<tui-icon name="position" color="#fff" :size="44" unit="rpx"></tui-icon>
				<view class="tui-category-scale">{{city}}</view>
			</view>
			<view class="tui-rolling-search">
				<tui-icon name="search-2" :size="32" unit="rpx"></tui-icon>
				<swiper vertical autoplay circular interval="8000" class="tui-swiper">
					<swiper-item v-for="(item, index) in hotSearch" :key="index" class="tui-swiper-item" @tap="search">
						<view class="tui-hot-item">{{ item }}</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!--header-->

		<view class="view-banner">
			<view class="tui-banner-bg">
				<view class="tui-primary-bg tui-route-left"></view>
				<view class="tui-primary-bg tui-route-right"></view>
				
				<view class="tui-banner-box">
					<swiper
						:indicator-dots="true"
						:autoplay="true"
						:interval="5000"
						:duration="150"
						class="tui-banner-swiper"
						:circular="true"
						indicator-color="rgba(255, 255, 255, 0.8)"
						indicator-active-color="#fff"
					>
					<swiper-item v-for="(item, index) in banner" :key="index">
						<image :src="item.adv_image" class="tui-slide-image" mode="widthFix" />
					</swiper-item>
						
					</swiper>
				</view>
			</view>
		</view>

		<view class="yy-box">
			<view class="yy-box-item" v-for="(item, index) in joingTrade" :key="index" @tap="detail(item)">
				<view class="item-pic">
					<view class="item-pic-block">
						<image :src="item.shop_photos" class="item-pic-block" mode="scaleToFill" /></image>
					</view>
				</view>
				<view class="item-info">
					<view class="item-title">
						{{item.shop_name}}
					</view>
					<view class="item-locations">
						<view class="adress">
							<image src="/static/images/maps/locations.png" class="icons" mode="widthFix"></image>
						    <view class="address-info">
						     {{item.address}}
							</view>
						</view>
						<view class="distance">据您{{item.hkw}}</view>
					</view>
					<view class="tag">
						<view class="tag-btns">{{item.tag1}}</view>
						<view class="tag-btns">{{item.tag2}}</view>
					</view>
					<view class="hots">
						<view class="htos-tag"><image src="/static/images/maps/hot.png" class="icons" mode="widthFix"></image>
						热度:{{item.hot}}%</view>
						<view class="htos-tag"><image src="/static/images/maps/love.png" class="icons-star" mode="widthFix"></image>
						好评度:{{item.star}}%</view>
					</view>
				</view>
			</view>
			
		</view>
		<!--加载loadding-->
		<tui-loadmore v-if="loadding" :index="3" type="grey"></tui-loadmore>
		<tui-nomore v-if="!pullUpOn" backgroundColor="#fafafa"></tui-nomore>
		<view v-if="joingTrade==''">
			<tui-no-data :fixed="false" imgUrl="/static/images/nodata/error.png">暂无数据</tui-no-data>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			current: 0,
			
			hotSearch: [],
			banner: [],
			city:'滨江',
			pageIndex: 1,
			loadding: false,
			pullUpOn: true,
			joingTrade:'',
			latitude:'',
			joingTrades: "",
			longitude:'',
			jointrader: false,
			
		};
	},
	onShow() {
		
		// #ifndef MP-WEIXIN
		this.tui.haslogin();
		if(this.tui.isLogin()){
			
		}
		// #endif
		this.init();
		this.inits();
		this.initing();
		// this.maps();
	},
	methods: {
		// maps(){
			
		// 	uni.getLocation({
		// 	    success: (res) => {
		// 			let _this=this;
		// 	        let latitude,longitude;
		// 	        latitude = res.latitude.toString();
					
		// 	        longitude = res.longitude.toString();
		// 			this.longitude=res.longitude.toString();
		// 			this.latitude=res.latitude;
		// 			this.inits();
		// 	        uni.request({
		// 	        	header:{
		// 	        	   "Content-Type": "application/text"
		// 	        	},
		// 	        	url:'http://apis.map.qq.com/ws/geocoder/v1/?location='+latitude+','+longitude+'&key=ODSBZ-JQX6J-UKWF4-KCIOO-EZX53-POFIO',
		// 	        	success(re) {
		// 	        		_this.city  = re.data.result.address_component.city;
		// 	        	}
		// 	        });
		// 	    },
		// 	    fail: (err) => {
		// 	        if (err.errMsg.indexOf("auth deny") >= 0) {
		// 				this.tui.toast("访问位置被拒绝");
		// 	        } else {
		// 				this.tui.toast(err.errMsg);
		// 	        }
			        
		// 	    }
		// 	})
		// },
		
		
		initing(){
			let token = this.tui.getToken();
			let joiningTrader={
				token: token,
				type:1,
			};
			
			// let joingTrade=this.tui.request('join','post',joiningTrader,1000,1,'','joinTradeDetail');
			// Promise.resolve(joingTrade).then((value)=>{
			//    if(value.code==10000){ 
			// 	this.joingTrades=value.data;
			//    }else{
			   	
			//    }
			// })
		},
		init(){
			let token = this.tui.getToken();
			let datas={
				token: token,
				id:2
			};
			//banner 
			let banner=this.tui.request('goods','post',datas,1000,1,'','banner');
			Promise.resolve(banner).then((value)=>{
			   if(value.code==10000){
			   	this.banner=value.data.adv_list;
			   }else{
			   	this.tui.toast(value.message);
			   }
			})
			
		
		},
		inits(){
			this.loadding=true;
			let token = this.tui.getToken();
			let joingTradedatas={
				token: token,
				limit:20,
				page:this.pageIndex,
				longitude:this.longitude,
				latitude:this.latitude,
			};
			
			let joingTrade=this.tui.request('join','post',joingTradedatas,1000,1,'','joingTradeList');
			Promise.resolve(joingTrade).then((value)=>{
			   if(value.code==10000){
				this.joingTrade=value.data;
				this.loadding=false;
			   }else{
			   	this.tui.toast(value.message);
			   }
			})
		},
		treaty:function(){
			uni.navigateTo({
				url: '/pageschild/franchisee/treaty'
			});
		},
		apply(){
			uni.navigateTo({
				url: '/pageschild/franchisee/apply'
			});
		},
		applys(){ 
			if(this.joingTrades.is_poundage==0){
				uni.navigateTo({
					url: '/pageschild/franchisee/applys'
				});
			}else{
				uni.navigateTo({
					url: '/pageschild/user/merchant'
				});
			}
			
		},
		detail: function(data) {
			uni.openLocation({
				longitude: Number(data.latitude),
				latitude: Number(data.longitude),
				name: data.shop_name,
				address: data.address
			})
		},
		
		search: function() {
			uni.navigateTo({
				url: '../search/search'
			});
		}
	},
	onPullDownRefresh: function() {
		let loadData = JSON.parse(JSON.stringify(this.productList));
		loadData = loadData.splice(0, 10);
		this.productList = loadData;
		this.pageIndex = 1;
		this.pullUpOn = true;
		this.loadding = false;
		uni.stopPullDownRefresh();
	},
	onReachBottom: function() {
		if (!this.pullUpOn) return;
		this.loadding = true;
		if (this.pageIndex == 4) {
			this.loadding = false;
			this.pullUpOn = false;
		} else {
			let loadData = JSON.parse(JSON.stringify(this.productList));
			loadData = loadData.splice(0, 10);
			if (this.pageIndex == 1) {
				loadData = loadData.reverse();
			}
			this.productList = this.productList.concat(loadData);
			this.pageIndex = this.pageIndex + 1;
			this.loadding = false;
		}
	}
};
</script>
<style>
page {
	background-color: #f7f7f7;
}
.container {
	padding-bottom: 100rpx;
	color: #333;
}
/*tabbar*/
.tui-tabbar {
	width: 100%;
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 99999;
	background: #fff;
	height: 100rpx;
	left: 0;
	bottom: 0;
	padding-bottom: env(safe-area-inset-bottom);
}
.yy-box{
	border-top-left-radius: 30rpx;
	border-top-right-radius: 30rpx;
	margin-top: -4rpx;
	z-index: 10;
	background: #f7f7f7;
	padding: 140rpx 30rpx 30rpx 30rpx;
}
.tui-activity-box {
	
		/* padding:0 40rpx; */
	}
.yy-box-item{
	background: #fff;border-radius:20rpx;
	padding:40rpx;
	display: flex;
	margin-bottom: 20rpx;
	align-items: center;
	width:100%;
	box-sizing: border-box;
}
.yy-box-item .item-pic{
	width:150rpx;
	height:150rpx;
	background:#f6bf10;border-radius: 24rpx;
	margin-right: 30rpx;
}
.item-pic-block{
	width:150rpx;
	border-radius: 24rpx;
	height:150rpx;
	display: block;
}
.yy-box-item .item-info{
	width:100%;
	flex-direction: column;
}
.yy-box-item .item-info .tag{
	display: flex;
	align-items: center;
	justify-content:left;
	font-size: 22rpx;
	margin-bottom: 10rpx;
}
.adress{
	display: flex;
	align-items: center;
	width:70%;
	box-sizing: border-box;
	justify-content:space-between;
}
.address-info{
	width:100%;
	word-break: break-all;
	word-wrap: break-word;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}
.distance{
	}
.htos-tag{
	border-radius: 8rpx;
	padding: 4rpx;
	margin-right: 10rpx;
	color:#f3532d;
	display: flex;
	align-items: center;
	justify-content:space-between;}
.item-locations{
	font-size: 24rpx;color:#757473;margin-bottom:10rpx;
	display: flex;
	margin-top: 10rpx;
	justify-content:space-between;
/* 	align-items: center;
	justify-content:left; */
}
.tag-btns{
	background:#f9d1a98f;padding: 6rpx;border-radius: 10rpx;color:#fb9143;
	margin-right: 10rpx;
}
.icons{width:24rpx;height:24rpx;margin-right: 10rpx;}
.item-title{font-size: 30rpx;font-weight: bold;text-align: left;}
.hots{
	display: flex;
	align-items: center;
	justify-content: left;
	font-size: 22rpx;color:#f6bf10
}
.icons-star{
	width:28rpx;height:26rpx;margin-right: 10rpx;
}
.tui-safearea-bottom {
	width: 100%;
	height: env(safe-area-inset-bottom);
}
.tui-tabbar::before {
	content: '';
	width: 100%;
	border-top: 1rpx solid #d9d9d9;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
}
.tui-tabbar-item {
	flex: 1;
	width: 25%;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	font-size: 24rpx;
	color: #666;
	height: 80rpx;
}

.tui-ptop-4 {
	padding-top: 4rpx;
}

.tui-scale {
	font-weight: bold;
	transform: scale(0.8);
	transform-origin: center 100%;
	line-height: 30rpx;
}

.tui-item-active {
	color: #e41f19 !important;
}
/*tabbar*/
.view {
	width: 100%;
	height: 100rpx;
	padding: 0 48rpx 0 16rpx;
	box-sizing: border-box;
	background-color: #40836c;
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 999;
}
.tui-rolling-search {
	width: 86%;
	height: 60rpx;
	border-radius: 35rpx;
	padding: 0 40rpx 0 30rpx;
	box-sizing: border-box;
	background-color: #fff;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	color: #999;
}

.tui-category {
	font-size: 24rpx;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	/* flex-direction: column; */
	margin: 0;
	margin-right: 22rpx;
	flex-shrink: 0;
}

.tui-category-scale {
	transform: scale(0.7);
	line-height: 24rpx;
	display: flex;
	font-size: 34rpx;
}

.tui-icon-category {
	line-height: 20px !important;
	margin-bottom: 0 !important;
}

.tui-swiper {
	font-size: 26rpx;
	height: 60rpx;
	flex: 1;
	padding-left: 12rpx;
}

.tui-swiper-item {
	display: flex;
	align-items: center;
}

.tui-hot-item {
	line-height: 26rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.view-banner {
	padding-top: 10rpx;
	box-sizing: border-box;
 	background: #40836c;
}

.tui-hot-search {
	color: #fff;
	font-size: 24rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20rpx;
	box-sizing: border-box;
	position: relative;
	z-index: 2;
}

.tui-hot-tag {
	background-color: rgba(255, 255, 255, 0.15);
	padding: 10rpx 24rpx;
	border-radius: 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 24rpx;
}

.tui-banner-bg {
	display: flex;
	height: 180rpx;
	/* background-color: #e41f19; */
	position: relative;
}

.tui-primary-bg {
	width: 50%;
	display: inline-block;
	height: 224rpx;
	/* border: 1px solid transparent; */
	position: relative;
	z-index: 1;
	background-color: #40836c;
}


.tui-banner-box {
	width: 100%;
	padding: 0 30rpx;
	box-sizing: border-box;
	position: absolute;
	/* overflow: hidden; */
	z-index: 99;
	bottom: -80rpx;
	left: 0;
}

.tui-banner-swiper {
	width: 100%;
	height: 220rpx;
	border-radius: 20rpx;
	overflow: hidden;
	transform: translateY(0);
}

.tui-slide-image {
	width: 100%;
	height: 220rpx;
	display: block;
	z-index: 100;
}

/* #ifdef MP-WEIXIN */
.tui-banner-swiper .wx-swiper-dot {
	width: 8rpx;
	height: 8rpx;
	display: inline-flex;
	background: none;
	justify-content: space-between;
}

.tui-banner-swiper .wx-swiper-dot::before {
	content: '';
	flex-grow: 1;
	background-color: rgba(255, 255, 255, 0.8);
	border-radius: 16rpx;
	overflow: hidden;
}

.tui-banner-swiper .wx-swiper-dot-active::before {
	background-color: #fff;
}

.tui-banner-swiper .wx-swiper-dot.wx-swiper-dot-active {
	width: 16rpx;
}

/* #endif */

/* #ifndef MP-WEIXIN */
>>> .tui-banner-swiper .uni-swiper-dot {
	width: 8rpx;
	height: 8rpx;
	display: inline-flex;
	background-color: none;
	justify-content: space-between;
}

>>> .tui-banner-swiper .uni-swiper-dot::before {
	content: '';
	flex-grow: 1;
	background-color: rgba(255, 255, 255, 0.8);
	border-radius: 16rpx;
	overflow: hidden;
}

>>> .tui-banner-swiper .uni-swiper-dot-active::before {
	background-color: #fff;
}

>>> .tui-banner-swiper .uni-swiper-dot.uni-swiper-dot-active {
	width: 16rpx;
}

/* #endif */

.tui-product-category {
	background-color: #fff;
	padding: 80rpx 20rpx 30rpx 20rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	font-size: 24rpx;
	color: #555;
	margin-bottom: 20rpx;
}

.tui-category-item {
	width: 20%;
	height: 118rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: column;
	padding-top: 30rpx;
}

.tui-category-img {
	height: 80rpx;
	width: 80rpx;
	display: block;
}

.tui-category-name {
	line-height: 24rpx;
}

.tui-product-box {
	margin-top: 20rpx;
	padding: 0 20rpx;
	box-sizing: border-box;
}

.tui-pb-20 {
	padding-bottom: 20rpx;
}

.tui-bg-white {
	background-color: #fff;
}

.tui-group-name {
	width: 100%;
	font-size: 32rpx;
	font-weight: bold;
	text-align: center;
	padding: 24rpx 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tui-activity-box {
	display: flex;
	background:#f6bf10;
	padding:10rpx 30rpx;
	/* border-radius: 12rpx; */
	overflow: hidden;
}

.tui-activity-img {
	width: 100%;
	border-radius: 14rpx;
	display: block;
}

.tui-new-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

.tui-new-item {
	width: 49%;
	height: 200rpx;
	padding: 0 20rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	background: #f5f2f9;
	position: relative;
	border-radius: 12rpx;
}

.tui-new-mtop {
	margin-top: 2%;
}

.tui-title-box {
	font-size: 24rpx;
}

.tui-new-title {
	line-height: 32rpx;
	word-break: break-all;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.tui-new-price {
	padding-top: 18rpx;
}

.tui-new-present {
	color: #ff201f;
	font-weight: bold;
}

.tui-new-original {
	display: inline-block;
	color: #a0a0a0;
	text-decoration: line-through;
	padding-left: 12rpx;
	transform: scale(0.8);
	transform-origin: center center;
}

.tui-new-img {
	width: 160rpx;
	height: 160rpx;
	display: block;
	flex-shrink: 0;
}

.tui-new-label {
	width: 56rpx;
	height: 56rpx;
	border-top-left-radius: 12rpx;
	position: absolute;
	left: 0;
	top: 0;
}

.tui-product-list {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	flex-wrap: wrap;
	box-sizing: border-box;
	/* padding-top: 20rpx; */
}

.tui-product-container {
	flex: 1;
	margin-right: 2%;
}

.tui-product-container:last-child {
	margin-right: 0;
}

.tui-pro-item {
	width: 100%;
	margin-bottom: 4%;
	background: #fff;
	box-sizing: border-box;
	border-radius: 12rpx;
	overflow: hidden;
}

.tui-pro-img {
	width: 100%;
	display: block;
}

.tui-pro-content {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-sizing: border-box;
	padding: 20rpx;
}

.tui-pro-tit {
	color: #2e2e2e;
	font-size: 26rpx;
	word-break: break-all;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.tui-pro-price {
	padding-top: 18rpx;
}

.tui-sale-price {
	font-size: 34rpx;
	font-weight: 500;
	color: #e41f19;
}

.tui-factory-price {
	font-size: 24rpx;
	color: #a0a0a0;
	text-decoration: line-through;
	padding-left: 12rpx;
}

.tui-pro-pay {
	padding-top: 10rpx;
	font-size: 24rpx;
	color: #656565;
}
</style>
